<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>什么是跨域！</title>
</head>
<body>
    
</body>
</html>
<script>
//07.16再次修订-北京-丰台-夜 

 //同源策略 
    //跨域是浏览器做出的限制,和后端没关系
    //最早由NEwscape公司提出，是浏览器的一种安全策略

//同源？
    //协议，域名，端口号 必须完全相同 违背同源策略就是跨域
    //不懂我举个栗子，仔细看url  
    /*
        http://www.123.com/index.html      调用 http://www.123.com/serve.php             非跨域
        http://www.123.com/index.html      调用 http://www.456.com/serve.php             主域名不同: 123/456 跨域了鸭 
        http://abc.123.com/index.html      调用 http://def.123.com/serve.php             子域名不同: abc/def 跨域了鸭就
        http://www.123.com/index.html      调用 https://www.123.com/serve.php            协议不同: http/https 跨域了鸭又 
        http://www.123.com:8080/index.html 调用 http://www.123.com:8081/serve.php        端口不同: 8080/8081 跨域了鸭鸭
    浏览器去执行js脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会执行了.
    注意，localhost和127.0.0.1虽然指向本机，当也属于跨域 
    */

//解决跨域方案
    /*
        1 通过jsonp解决
        2 通过document.domain+iframe跨域
        3 location.hash+iframe
        4 window.name+iframe跨域 
        5 postMessafe跨域
        6 跨域资源共享 CORS  https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS官网 
        7 nginx代理跨域
        8 nodejs中间件代理跨域
        9 WebSocket协议跨域*/
// 1.  CORS 是什么？
//     CORS（Cross-OriginResourceSharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，
//     完全在服务器中进行处理，支持get 和 post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
// 2. CORS 怎么工作的？
        //CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
        //以后就会对响应放行。
// 3.  CORS 的使用
        // 主要是服务器端的设置：
            // router.get("/testAJAX",function(req,res){
            // //通过 res 来设置响应头，来允许跨域请求 
            // //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000"); 
            // res.set("Access-Control-Allow-Origin","*"); 
            // res.send("testAJAX 返回的响应");
            // });


// 二、是代理（前端代理和后端代理）
    // 前端代理我在vue中主要是通过vue脚手架中的config中的index文件来配置的，其中有个proxyTable来配置跨域的
// 三、是CORS
    // CORS全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的
// 注：现在主流框架都是用代理和CORS跨域实现的




// 说一下原生ajax的交互过程（即流程）
//1 先创建XHR对象即XMLHttpRequest()
//2 然后open准备发送，open中有三个参数一是提交方式get和post,二是接口地址，三是同步和异步
//3 第三步是用send发送
//4 第四步再发送的过程中通过onreadystatechange来监听接收的回调函数，
//  可以通过判断readyState＝＝4和status=＝200来判断是否成功返回，然后通过responseText接收成功返回的数据

// 对于一个数据请求来说，1可以分为发起网络请求、2后端处理、3浏览器响应三个步骤



//什么是 CSRF 攻击？如何防范 CSRF 攻击？
    /* CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被
    攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。*/

    //CSRF攻击的本质是利用了 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。

    //一般的 CSRF 攻击类型有三种：
       //1 GET 类型的 CSRF 攻击，比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交 
       //2 POST类型的 CSRF 攻击，比如说构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。
       //3 链接类型的 CSRF 攻击，比如说在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。

       
// CSRF 可以用下面几种方法来防护：
// 第一种是同源检测的方法，服务器根据 http 请求头中 origin 或者 referer 信息来判断请求是否为允许访问的站点，从而对请求进行过滤。当 origin 或者 referer 信息都不存在的时候，直接阻止。这种方式的缺点是有些情况下 referer 可以被伪造。还有就是我们这种方法同时把搜索引擎的链接也给屏蔽了，所以一般网站会允许搜索引擎的页面请求，但是相应的页面请求这种请求方式也可能被攻击者给利用。
// 第二种方法是使用 CSRF Token 来进行验证，服务器向用户返回一个随机数 Token ，当网站再次发起请求时，在请求参数中加入服务器端返回的 token ，然后服务器对这个 token 进行验证。这种方法解决了使用 cookie 单一验证方式时，可能会被冒用的问题，但是这种方法存在一个缺点就是，我们需要给网站中的所有请求都添加上这个 token，操作比较繁琐。还有一个问题是一般不会只有一台网站服务器，如果我们的请求经过负载平衡转移到了其他的服务器，但是这个服务器的 session 中没有保留这个 token 的话，就没有办法验证了。这种情况我们可以通过改变 token 的构建方式来解决。
// 第三种方式使用双重 Cookie 验证的办法，服务器在用户访问网站页面时，向请求域名注入一个Cookie，内容为随机字符串，然后当用户再次向服务器发送请求的时候，从 cookie 中取出这个字符串，添加到 URL 参数中，然后服务器通过对 cookie 中的数据和参数中的数据进行比较，来进行验证。使用这种方式是利用了攻击者只能利用 cookie，但是不能访问获取 cookie 的特点。并且这种方法比 CSRF Token 的方法更加方便，并且不涉及到分布式访问的问题。这种方法的缺点是如果网站存在 XSS 漏洞的，那么这种方式会失效。同时这种方式不能做到子域名的隔离。
// 第四种方式是使用在设置 cookie 属性的时候设置 Samesite ，限制 cookie 不能作为被第三方





</script>